<template>
  <el-drawer v-model="visible" :title="$t('announcement.announcementDetail')" :size="1200" class="announcement-detail-drawer"
    :close-on-click-modal="false" destroy-on-close @close="handleClose">
    <div v-loading="loading" class="relative h-[100%]">
      <div v-if="announcementData" class="h-[100%]">
        <!-- 标题和类型行 -->
        <div class="flex mb-[16px]">
          <div class="flex flex-1">
            <label class="w-[80px] text-[rgba(89,89,89,1)] text-right mr-[12px]">{{ $t('announcement.announcementTitle') }}</label>
            <div class="text-[rgba(25,25,25,1)] text-left">{{ announcementData.title || '--' }}</div>
          </div>
          <div class="flex flex-1">
            <label class="w-[80px] text-[rgba(89,89,89,1)] text-right mr-[12px]">{{ $t('announcement.announcementType') }}</label>
            <div class="text-[rgba(25,25,25,1)] text-left">{{ getTypeLabel(announcementData.type) || '--' }}</div>
          </div>
        </div>
        <!-- 内容展示区域 -->
        <div class="flex">
          <label class="w-[80px] text-[rgba(89,89,89,1)] text-right mr-[12px]">{{ $t('announcement.announcementContent') }}</label>
          <div class="flex-1 min-h-[400px] max-h-[78vh] overflow-y-auto">
            <!-- 使用Markdown渲染器显示内容，支持图片正确展示 -->
            <MarkdownViewer :content="displayContent" />
          </div>
        </div>
      </div>
      <!-- 空状态 -->
      <div v-else-if="!loading" class="flex items-center justify-center h-[300px]">
        <el-empty :description="$t('common.emptyTxt')" class="h-full bg-[#fff]" />
      </div>
    </div>
    <!-- 底部操作按钮 -->
    <template #footer>
      <div class="drawer-footer">
        <el-button @click="handleClose">{{ $t('announcement.close') }}</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { $t } from '@vben/locales';
import { getAnnouncementDetailApi } from '#/api/system/announcement';

import MarkdownViewer from '#/components/MarkdownViewer.vue';

interface Props {
  modelValue: boolean;
  announcementId?: string | number;
}

const props = defineProps<Props>();
const emit = defineEmits(['update:modelValue', 'edit']);

const visible = ref(false);
const loading = ref(false);
const announcementData = ref<any>(null);
const displayContent = ref('');

// 监听显示状态
watch(() => props.modelValue, (newVal) => {
  visible.value = newVal;
  if (newVal && props.announcementId) {
    fetchAnnouncementDetail();
  }
});

// 监听visible变化，同步到父组件
watch(visible, (newVal) => {
  emit('update:modelValue', newVal);
});

// 获取类型标签
const getTypeLabel = (type: string) => {
  const typeMap: any = {
    'upgrade': $t('announcement.types.upgrade'),
    'system': $t('announcement.types.system'),
  };
  return typeMap[type] || type;
};

// 获取公告详情
const fetchAnnouncementDetail = async () => {
  if (!props.announcementId) return;
  loading.value = true;
  try {
    const response = await getAnnouncementDetailApi(props.announcementId as string);
    let data = { ...response };

    // 图片转换交给MarkdownViewer组件处理

    announcementData.value = data;
    displayContent.value = data.details || '';
  } catch (error) {
    // console.error('获取公告详情失败:', error);
    ElMessage.error($t('announcement.messages.getDetailFailed'));
  } finally {
    loading.value = false;
  }
};

// 关闭抽屉
const handleClose = () => {
  visible.value = false;
  announcementData.value = null;
};
</script>
